<template>

  <div style="overflow: scroll;">
    <div class="home">

      <el-card class="card" v-for="(item,index) in articleList"
               :key="index">
        {{ item.title }}
      </el-card>


      <div class="card bpagination">
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :total="30">
        </el-pagination>
      </div>


    </div>



  </div>


</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent(
    {
      name: "BBody",


      setup() {
        const articleList = ref(
            [
              {
                title: "前端"
              },
              {
                title: "后端"
              },
              {
                title: "算法"
              },
              {
                title: "大数据"
              },
              {
                title: "AI"
              },
              {
                title: "前端"
              },
              {
                title: "后端"
              },
              {
                title: "算法"
              },
              {
                title: "AI"
              },
              {
                title: "前端"
              },
              {
                title: "后端"
              },
              {
                title: "算法"
              },
              {
                title: "AI"
              },
              {
                title: "前端"
              },
              {
                title: "后端"
              }

            ]
        )


        return {
          articleList


        }

      }
    },
)
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;


  .card {
    margin: 8px 8px 8px 0px;
    height: 19rem;
    width: 30%;
  }
  .bpagination{
    height: 8rem;
    width: auto;

  }


}


</style>